<template>
  <MainLayout>
    <router-view></router-view>
    <div class="marketing-management">
    <h2>营销管理</h2>
    
    <!-- 添加营销活动表单 -->
    <el-form :inline="true" class="add-marketing-form">
      <el-form-item label="活动名称">
        <el-input v-model="newMarketing.name" placeholder="请输入活动名称" />
      </el-form-item>
      <el-form-item label="活动类型">
        <el-select v-model="newMarketing.type" placeholder="请选择活动类型">
          <el-option label="折扣" value="discount" />
          <el-option label="满减" value="fullReduction" />
          <el-option label="赠品" value="gift" />
        </el-select>
      </el-form-item>
      <el-form-item label="活动时间">
        <el-date-picker
          v-model="newMarketing.time"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="addMarketing">添加活动</el-button>
        <el-button type="danger" :disabled="selectedMarketings.length === 0" @click="batchDelete">批量删除</el-button>
      </el-form-item>
    </el-form>

    <!-- 营销活动列表 -->
    <el-table
      :data="paginatedMarketings"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column prop="id" label="ID" width="100" />
      <el-table-column prop="name" label="活动名称" />
      <el-table-column prop="type" label="活动类型" />
      <el-table-column prop="time" label="活动时间" />
      <el-table-column label="操作" width="180">
        <template #default="scope">
          <el-button size="small" @click="editMarketing(scope.row)">编辑</el-button>
          <el-button size="small" type="danger" @click="deleteMarketing(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      class="pagination"
      background
      layout="prev, pager, next"
      :total="marketings.length"
      :page-size="pageSize"
      :current-page="currentPage"
      @current-change="handlePageChange"
    />

    <!-- 编辑营销活动模态框 -->
    <el-dialog v-model="isEditing" title="编辑营销活动" width="30%">
      <el-form :model="editingMarketing">
        <el-form-item label="活动名称">
          <el-input v-model="editingMarketing.name" />
        </el-form-item>
        <el-form-item label="活动类型">
          <el-select v-model="editingMarketing.type" placeholder="请选择活动类型">
            <el-option label="折扣" value="discount" />
            <el-option label="满减" value="fullReduction" />
            <el-option label="赠品" value="gift" />
          </el-select>
        </el-form-item>
        <el-form-item label="活动时间">
          <el-date-picker
            v-model="editingMarketing.time"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="cancelEdit">取消</el-button>
        <el-button type="primary" @click="saveEdit">保存</el-button>
      </template>
    </el-dialog>
  </div>
  </MainLayout>

</template>

<script>
import MainLayout from '@/layouts/MainLayout.vue'
export default {
  components: {
    MainLayout
  },
  data() {
    return {
      marketings: [
        { id: 1, name: '双十一大促', type: 'discount', time: ['2023-11-11 00:00:00', '2023-11-11 23:59:59'] },
        { id: 2, name: '618年中大促', type: 'fullReduction', time: ['2023-06-18 00:00:00', '2023-06-18 23:59:59'] }
      ],
      newMarketing: {
        name: '',
        type: '',
        time: []
      },
      isEditing: false,
      editingMarketing: {
        id: null,
        name: '',
        type: '',
        time: []
      },
      currentPage: 1,
      pageSize: 5,
      selectedMarketings: []
    };
  },
  computed: {
    paginatedMarketings() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.marketings.slice(start, end);
    }
  },
  methods: {
    addMarketing() {
      if (this.newMarketing.name && this.newMarketing.type && this.newMarketing.time.length === 2) {
        this.marketings.push({
          id: this.marketings.length + 1,
          ...this.newMarketing
        });
        this.newMarketing = { name: '', type: '', time: [] };
      }
    },
    editMarketing(marketing) {
      this.isEditing = true;
      this.editingMarketing = { ...marketing };
    },
    saveEdit() {
      const index = this.marketings.findIndex(m => m.id === this.editingMarketing.id);
      if (index !== -1) {
        this.marketings.splice(index, 1, this.editingMarketing);
      }
      this.cancelEdit();
    },
    cancelEdit() {
      this.isEditing = false;
      this.editingMarketing = { id: null, name: '', type: '', time: [] };
    },
    deleteMarketing(marketingId) {
      this.marketings = this.marketings.filter(marketing => marketing.id !== marketingId);
    },
    handlePageChange(page) {
      this.currentPage = page;
    },
    handleSelectionChange(selection) {
      this.selectedMarketings = selection;
    },
    batchDelete() {
      this.$confirm('确定要删除选中的营销活动吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const ids = this.selectedMarketings.map(marketing => marketing.id);
        this.marketings = this.marketings.filter(marketing => !ids.includes(marketing.id));
        this.selectedMarketings = [];
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
  },
  beforeUnmount() {
    console.log('Component is about to be unmounted');
    this.isEditing = false;
    this.editingMarketing = { id: null, name: '', type: '', time: [] };
    this.selectedMarketings = [];
  },
  unmounted() {
    console.log('Component has been unmounted');
  }
};
</script>

<style scoped>
.marketing-management {
  width: 100%;
  min-height: 100vh;
  margin: 0;
  padding: 30px;
  background-color: #fff;
  padding-bottom: 100px;
}

.pagination {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 30px;
  margin-top: 24px;
  justify-content: center;
  padding: 16px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

.el-dialog {
  border-radius: 8px;
}

.el-dialog__header {
  background-color: #f5f7fa;
  border-bottom: 1px solid #ebeef5;
  border-radius: 8px 8px 0 0;
  padding: 16px;
}

.el-dialog__body {
  padding: 20px;
}

.el-dialog__footer {
  padding: 16px;
  border-top: 1px solid #ebeef5;
  background-color: #f5f7fa;
  box-shadow: none;
}

.marketing-management h2 {
  margin-top: 10px;
  margin-bottom: 24px;
  font-size: 24px;
  font-weight: 500;
  text-align: left;
}
</style>